<template>
    <div class="wanted-book-div">
        <!--批量删除按钮栏-->
        <el-row class="batch-row" type="flex">
            <el-col :span="4">
                <el-button @click="batchDeleteWantedBooks" v-if="selectedBookList.length > 0" type="danger" size="mini">批量删除</el-button>
            </el-col>
            <el-col :span="3">
                <el-button @click="bacthSaveWantedBooks" v-if="changedBookList.length > 0" type="primary" size="mini">批量保存</el-button>
            </el-col>
        </el-row>
        <!--表格栏-->
        <el-row type="flex" justify="center">
            <el-col :span="24">
                <el-table
                    :data="wantedBookList"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        align="center"
                        type="selection"
                        width="30">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="书名"
                        prop="bookName">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="卖家用户名"
                        prop="bookUserName">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="数量"
                        width="200">
                        <template slot-scope="scope">
                            <el-input-number size="mini"  v-model="scope.row.count" @change="handleChange(scope.$index,scope.row)" :min="1" :max="10" label="描述文字"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        label="操作"
                        width="180">
                        <template slot-scope="scope">
                            <!--<el-button
                                size="mini"
                                @click="handleSave(scope.$index,scope.row)">保存</el-button>-->
                            <el-button
                                size="mini"
                                @click="handleSend(scope.$index,scope.row)">发送</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页栏-->
                <el-row class="pagination-row" type="flex" justify="center">
                    <el-col :span="20">
                        <el-pagination @current-change="handleCurrentChange"
                        :current-page="pageInfo.currentPage"  :page-size="pageInfo.pageSize"
                        layout="total, prev, pager, next" :total="pageInfo.total">
                        </el-pagination>

                    </el-col>
                </el-row>
            </el-col>
        </el-row>


    </div>
</template>

<script>
    import storage from "../../model/storage";

    export default {
        name: "WantedBookPart",
        data(){
            return{
                wantedBookList:[
                ],
                selectedBookList:[],
                pageInfo:{currentPage:1,total:1,pageSize:10},
                changedBookList:[],
            }
        },
        methods:{
            //批量选择
            handleSelectionChange(val){
                this.selectedBookList = val;
                //console.log(this.selectedBookList);
            },
            //计数器发生变化
            handleChange(index,row) {
                //console.log(index,JSON.stringify(row));
                this.changedBookList.push((row));
            },
            //保存按钮触发事件
            handleSave(index,row){
                //console.log(index,row);
                this.$confirm('确定要保存修改吗?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    if(this.changedBookList.indexOf(row) === -1){
                        this.$message({
                            type:'info',
                            message:'该项并未发生改变'
                        });
                    }
                    else {this.saveWantedBooks(row);}
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'已取消保存修改'
                    });
                });
            },
            //批量保存想要的书籍
            bacthSaveWantedBooks(){
                this.$confirm('确定保存修改过的所有书籍吗','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type:'warning'
                }).then(()=>{
                    this.saveWantedBooks(this.changedBookList);
                    this.changedBookList=[];
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'已取消保存'
                    });
                });
            },
            //保存书籍接口
            saveWantedBooks(wantedBooks){
                let param;
                //判断参数类型，若为数组则无需欧早餐书
                if(!(wantedBooks instanceof Array)){
                    //若不是数组则需要构造成数组对象作为参数
                    param = [];
                    param.push(wantedBooks);
                }else{
                    param = wantedBooks;
                }

                this.$axios.post('/manager/updateShoppingList',
                    param).then(response => {
                    if(response.data.success){
                        console.log("保存书籍成功信息：" + response.data.data);
                        this.$message.info("保存成功");
                        this.getWantedBookList(1, this.pageInfo.pageSize, {userInfoId: this.$store.state.userInfo.userInfoId});
                    }else{
                        console.log('保存书籍失败信息：' + response.data.msg);
                        if (response.data.msg === 'sessionInvalid') {
                            storage.isSessionValid(this);
                        }
                    }
                }).catch(error => {
                    console.log(error);
                }).finally(() => {

                });
            },
            //删除按钮触发事件
            handleDelete(index,row){
                //console.log(index,JSON.stringify(row));
                this.$confirm('确定要删除吗?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(()=>{
                    this.deleteWantedBooks(row);
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'已取消删除'
                    });
                });
            },
            //批量删除想要的书籍
            batchDeleteWantedBooks(){
                this.$confirm('确定要删除选中的所有书籍吗','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type:'warning'
                }).then(()=>{
                    this.deleteWantedBooks(this.selectedBookList);
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'已取消删除'
                    });
                });
            },

            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.pageInfo.currentPage = val;

                this.getWantedBookList(val,this.pageInfo.pageSize,{userInfoId: this.$store.state.userInfo.userInfoId});

            },
            getWantedBookList(currentPage,pageSize,searchParam){
                //获取列表的接口
                this.$axios.post( '/manager/getShoppingListByPage',
                    {currentPage: currentPage, pageSize: pageSize, searchParam: searchParam})
                    .then(response => {
                        if(response.data.success){
                            //console.log(response.data.data);
                            this.pageInfo.currentPage = response.data.data.currentPage;
                            this.pageInfo.total = response.data.data.total;
                            this.wantedBookList = response.data.data.records;
                        }else{
                            //若session过期则跳转到登陆页面
                            if (response.data.msg === 'sessionInvalid') {
                                sessionStorage.clear();
                                this.$store.commit('updateIsLogin', false);
                                this.$store.commit('updateUserInfo', null);
                                this.$router.push({name: 'login'});
                            }
                        }
                    }).catch(error => {
                    console.log(error);
                });

            },
            //删除书籍接口
            deleteWantedBooks(wantedBooks){
                let param;
                //判断参数类型，若为数组则无需欧早餐书
                if(!(wantedBooks instanceof Array)){
                    //若不是数组则需要构造成数组对象作为参数
                    param = [];
                    param.push(wantedBooks);
                }else{
                    param = wantedBooks;
                }

                this.$axios.post('/manager/deleteShoppingList',
                    param).then(response => {
                    if(response.data.success){
                        //console.log("删除书籍成功信息：" + response.data.data);
                        this.$message.info("删除成功");
                        this.getWantedBookList(1, this.pageInfo.pageSize, {userInfoId: this.$store.state.userInfo.userInfoId});
                    }else{
                        console.log('删除书籍失败信息：' + response.data.msg);
                        if (response.data.msg === 'sessionInvalid') {
                            storage.isSessionValid(this);
                        }
                    }
                }).catch(error => {
                    console.log(error);
                }).finally(() => {

                });

            },
        },
        mounted() {
            this.getWantedBookList(1,10,{userInfoId:this.$store.state.userInfo.userInfoId});
        }
    }
</script>

<style scoped>
    .pagination-row{
        text-align: center;
        margin-top: 30px;
    }
</style>